<template>
  <div class="container-special-session">
    <div class="wxkj-tab">
      <el-tabs v-model="listQuery.timeState" @tab-click="getList">
        <el-tab-pane label="全部" name="0" />
        <el-tab-pane label="进行中" name="1" />
        <el-tab-pane label="未开始" name="2" />
        <el-tab-pane label="已结束" name="3" />
      </el-tabs>
    </div>
    <div v-loading="listLoading" class="list mt15">
      <el-card v-for="(item,index) in list" :key="index" class="p0 mb15">
        <div class="item" @click="details(item.id,item.title)">
          <div class="banner">
            <!-- <el-image :src="item.imageFileId_dictText" fit="cover">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline" />
              </div>
            </el-image> -->
            <img :src="item.imageFileId_dictText" alt="">
          </div>
          <div class="title">
            <div class="text overflow-ellipsis">{{ item.title }}</div>
            <div class="date">{{ $moment(item.startTime).format(
              "yyyy-MM-DD"
            ) }} — {{ $moment(item.endTime).format(
              "yyyy-MM-DD"
            ) }}</div>
          </div>
          <div class="statistics">
            <div class="li fl">
              <p class="number">{{ item.jobCount || 0 }}</p>
              <p>职位</p>
            </div>
            <div class="li fl">
              <p class="number">{{ item.userCount || 0 }}</p>
              <p>人才</p>
            </div>
          </div>
          <div class="state">
            <span v-if="item.timeState == 1">进行中</span>
            <span v-if="item.timeState == 2">未开始</span>
            <span v-if="item.timeState == 3">已结束</span>
          </div>
        </div>
      </el-card>

    </div>
    <no-data v-if="noDateView" />

    <pagination
      v-show="total>0"
      :total="total"
      prev-text="上一页"
      next-text="下一页"
      layout="prev, pager, next, jumper"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      page-background="none"
      @pagination="getList"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // 分页
import noData from '@/components/noData'
import { listSpecialSession } from '@/api/special-session'
export default {
  name: 'SpecialSession',
  components: { Pagination, noData },
  props: {},
  data() {
    return {
      form: {},
      total: 1,
      list: [],
      noDateView: false,
      listLoading: false,
      listQuery: {
        pageNo: 1,
        pageSize: 5,
        timeState: 0
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getList()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  // 销毁
  destroyed() {},
  // 方法
  methods: {
    // 获取列表数据
    getList() {
      this.listLoading = true
      const query = this.listQuery
      listSpecialSession(query).then(res => {
        const list = res.result.records
        this.list = list
        this.total = res.result.total
        this.listLoading = false
        if (list.length == 0) {
          this.noDateView = true
        } else {
          this.noDateView = false
        }
      })
    },
    // 详情
    details(id, title) {
      this.$router.push({ name: 'specialSessionDetails', params: {
        id: id,
        title: title
      }})
    }
  }
}
</script>
<style lang="scss" scoped>
  .container-special-session{padding: 20px 0; padding-top: 15px;
    .list{
        .item{display: flex; align-items: center;position: relative; cursor:pointer;
            .banner{width: 345.6px; height: 90px; background: #999; line-height: 90px; text-align: center; font-size: 26px;
                img{width: 100%; height: 100%;}
            }
            .title{width: 350px;margin-left: 20px;position: relative;height: 90px;
                .text{font-size:16px;font-weight:400;line-height:21px;color:#333333;}
                .date{font-size:14px;font-weight:400;line-height:19px;color:#999999;position: absolute; bottom: 5px;}
            }
            .statistics{
                .li{width: 100px;
                    p{padding: 0; margin: 0; text-align: center;font-size:14px;font-weight:400;color:#999999;}
                    .number{font-size:16px;font-weight:bold;color:#666666;margin-bottom: 5px;}
                }
            }
            .state{
               font-size:14px;font-weight:400;color:#348CE8;position: absolute; right: 0px;width: 100px;text-align: center;
            }
        }
    }

  }
</style>
